import React, { Component } from 'react';
import { Table, Button, Icon, Pagination } from '@icedesign/base';
import IceLabel from '@icedesign/label';
import IceContainer from '@icedesign/container';

export default class UserTable extends Component {
  static displayName = 'UserTable';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);

    this.state = {
      dataSource: [{
        id:  1,
        username : `demo1`,
        nickname : '张三',
        email : 'abc@newegg.com.1',
        phone : '13999990001',
        disable : false,
        createDate : '2018-01-20 12:52:12',
        updateDate : '2018-02-20 12:52:12',
        memo : `Demo1`,
      },{
        id:  2,
        username : `demo2`,
        nickname : '李四',
        email : 'abc@newegg.com.1',
        phone : '13999990001',
        disable : false,
        createDate : '2018-01-20 12:52:12',
        updateDate : '2018-02-20 12:52:12',
        memo : `Demo1`,
      },{
        id:  3,
        username : `demo3`,
        nickname : '陈武',
        email : 'abc@newegg.com.1',
        phone : '13999990001',
        disable : false,
        createDate : '2018-01-20 12:52:12',
        updateDate : '2018-02-20 12:52:12',
        memo : `Demo1`,
      },{
        id:  4,
        username : `demo4`,
        nickname : '鲁迪',
        email : 'abc@newegg.com.1',
        phone : '13999990001',
        disable : true,
        createDate : '2018-01-20 12:52:12',
        updateDate : '2018-02-20 12:52:12',
        memo : `Demo1`,
      }],
      pageIndex : 1,
      pageSize : 10,
      total : 25,
    };
  }

  deleteItem = (record) => {
    const { id } = record;
    console.log('delete item', id);
  };

  changePage = (page) =>{ console.log(page) }

  renderStatus = (value, index, record) => {
    if(record.disable){
      return ( <IceLabel status="default">禁用</IceLabel> )
    }else{
      return ( <IceLabel status="success">启用</IceLabel> )
    }
  }

  renderOperator = (value, index, record) => {
    return (
      <Button.Group>
          <Button type="primary">编辑</Button>
          <Button type="primary" shape="warning" onClick={this.deleteItem.bind(this, record)}>删除</Button>
      </Button.Group>
    );
  };

  render() {
    return (
      <div className="selectable-table" style={styles.selectableTable}>
        <IceContainer>
          <Table dataSource={this.state.dataSource} isLoading={this.state.isLoading} >
            <Table.Column title="用户名" dataIndex="username" width={100} />
            <Table.Column title="昵称" dataIndex="nickname" width={100} />
            <Table.Column title="联系电话" dataIndex="phone" width={100} />
            <Table.Column title="邮箱" dataIndex="email" width={200} />
            <Table.Column title="创建时间" dataIndex="createDate" width={200} />
            <Table.Column title="状态" cell={this.renderStatus} align="center" width={50} />
            <Table.Column title="说明" dataIndex="memo" width={300} />
            <Table.Column title="操作" cell={this.renderOperator} align="center" width={150} />
          </Table>
          <div style={styles.pagination}>
            <Pagination onChange={this.changePage} total={this.state.total} pageSize={this.state.pageSize}/>
          </div>
        </IceContainer>
      </div>
    );
  }
}

const styles = {
  batchBtn: {
    marginRight: '10px',
  },
  IceContainer: {
    marginBottom: '20px',
    minHeight: 'auto',
    display: 'flex',
    justifyContent: 'space-between',
  },
  removeBtn: {
    marginLeft: 10,
  },
  pagination: {
    textAlign: 'right',
    paddingTop: '26px',
  },
};
